import React, { useMemo, useState, useEffect } from 'react'
import './AddEvent.css'
import { Button, SearchBar, Checkbox, Toast, NavBar } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'

export default function AddEvent() {
    const navigate = useNavigate()
    const location = useLocation()
    const [value, setValue] = useState([])
    const back = () => {
      navigate(-1)
    }
    const [data, setdata] = useState([])
    const getShopping = () => {
        axios.get('http://localhost:3000/getPeople').then(res => {
          setdata(res.data.people)
          console.log(res.data.people)
        })
      }
    useEffect(() => {
        getShopping()
    },[])
  return (
    <div className='addevent-cart'>
        <div className='shopping-cart-top'>
        <NavBar onBack={back} right={
          <div className='shopping-cart-top-right'>
          </div>
        }><b>添加参加人员</b></NavBar>
      </div>
      <div className='addevent-cart-content'>
        <Checkbox.Group
          value={value}
          onChange={val => {
            setValue(val)
            console.log(val)
          }}>

          {
            data.map((item, index) => {
              return (
                <div className='addebent-item' key={index}>
                  <Checkbox value={item.name}>
                    <div className='addevent-itema'>
                        <div>
                            <span className='addevent-itema-type'>{item.type}</span>
                            <span>{item.name}</span>
                        </div>
                        <div>
                            <span>{item.phone}</span>
                        </div>
                        <div>
                            <span>{item.types}</span>
                            <span>{item.hao}</span>
                        </div>
                    </div>
                  </Checkbox>

                </div>)
            })
          }
        </Checkbox.Group>
      </div>
      <div className='event-bottom-bottom'>
      
        <div className='shopping-cart-content-bottom-left'>
          <div className='event-bottom-left'>
            添加参观者
          </div>
        </div>
        <div className='event-bottom-right' onClick={()=>{
          if(value.length>0){
            navigate('/SubOrder',{
              state:order()
            })
          }
        }}>
          <b onClick={()=>{
            if(value.length>0){
              navigate('/eventsPay')
            }
          }}>确定（已选{value.length}人）</b>
        </div>
      </div>
    </div>
  )
}
